<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" nzRequired>
          <span>
            Username
            <i nz-icon nz-tooltip nzTitle="login user username" type="question-circle" theme="outline"></i>
          </span>
    </nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input id="username" formControlName="username" [(ngModel)]="user.username">
      <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">Please input your username!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="gender">Gender</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-radio-group [(ngModel)]="user.gender" id="gender" formControlName="gender">
        <label nz-radio nzValue="MALE">男</label>
        <label nz-radio nzValue="FEMALE">女</label>
        <label nz-radio nzValue="NOLIMIT">保密</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input formControlName="email" id="email" [(ngModel)]="user.email">
      <nz-form-explain *ngIf="validateForm.get('email').dirty && validateForm.get('email').errors">The input is not valid E-mail!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>Password</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input type="password" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()" [(ngModel)]="user.password">
      <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">Please input your password!</nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>Confirm Password</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input type="password" formControlName="checkPassword" id="checkPassword">
      <nz-form-explain *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
        <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
          Please confirm your password!
        </ng-container>
        <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
          Two passwords that you enter is inconsistent!
        </ng-container>
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="signature">Signature</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <input nz-input id="signature" placeholder="signature" [(ngModel)]="user.signature" formControlName="signature">
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" [nzFor]="userType">Type</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24">
      <nz-radio-group [(ngModel)]="user.type" id="userType" formControlName="userType">
        <label nz-radio nzValue="ADMIN">管理员</label>
        <label nz-radio nzValue="NORMAL">普通</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item nz-row style="margin-bottom:8px;">
    <nz-form-control [nzSpan]="14" [nzOffset]="6">
      <button nz-button nzType="primary">Create</button>
    </nz-form-control>
  </nz-form-item>
</form>
